// 放大镜功能
class Larger {
    constructor() {
        this.ele_span = document.getElementsByClassName("blocks")[0];
        this.middleFrame = document.getElementsByClassName("middleFrame")[0];
        this.largeFrame = document.getElementsByClassName("largeFrame")[0];
        this.middleImg = document.querySelector(".middleFrame>img");
        this.largeImg = document.getElementsByClassName("large")[0];
        this.mask = document.getElementsByClassName("mask")[0];
        this.proportion = 2;
        this.half = 0;
        this.width = this.middleFrame.offsetWidth;
        this.height = this.middleFrame.offsetHeight;
        this.addEvent();
    }
    addEvent() {
        this.ele_span.onmouseenter = () => {
            // 显示事件
            this.show();
        }
        this.ele_span.onmouseout = () => {
            // 隐藏事件
            this.hidden();
        }
        this.ele_span.onmousemove = (event) => {
            // 移动事件
            const eve = event || window.event;
            this.move(eve);
        }
    }
    show() {
        this.largeImg.style.display = "block";
        this.mask.style.display = "block";
        this.largeFrame.style.display = "block";
        let maskWidth = this.width * this.largeFrame.offsetWidth / this.largeImg.offsetWidth;
        let maskHeight = this.height * this.largeFrame.offsetHeight / this.largeImg.offsetHeight;
        this.mask.style.width = maskWidth + "px";
        this.mask.style.height = maskHeight + "px";
        this.half = maskWidth / 2;
        this.proportion = this.largeImg.offsetHeight / this.largeFrame.offsetHeight;
    }
    hidden() {
        this.largeImg.style.display = "none";
        this.largeFrame.style.display = "none";
        this.mask.style.display = "none";
    }
    move(eve) {
        let half = this.half;
        let maskWidth = this.mask.offsetWidth / 2;
        let maskHeight = this.mask.offsetHeight / 2;
        let x = eve.offsetX;
        let y = eve.offsetY;
        let width = this.width;
        let height = this.height;
        if (x < half) {
            x = half
        }
        if (y < half) {
            y = half
        }
        if (x > width - half) {
            x = width - half
        }
        if (y > height - half) {
            y = height - half
        }
        this.mask.style.left = (x - maskWidth) + "px";
        this.mask.style.top = (y - maskHeight) + "px";
        this.largeImg.style.left = -(x - half) * this.proportion + "px";
        this.largeImg.style.top = -(y - half) * this.proportion + "px";

    }

}
new Larger()
// 数量加减
class MinusPlus {
    constructor() {
        this.minus = document.querySelector("span.minus");
        this.plus = document.querySelector("span.plus");
        this.ele_bar = document.getElementById("numberBar");
        this.addEvent();
    }
    addEvent() {
        // 增加事件
        this.plus.onclick = () => {
            this.increase();
        }
        // 减少事件
        this.minus.onclick = () => {
            this.decrease();
        }
    }
    increase() {
        let value = this.ele_bar.value;
        value++;
        this.ele_bar.value = value;
    }
    decrease() {
        let value = this.ele_bar.value;
        if (value > 0) {
            value--;
        }
        this.ele_bar.value = value;
    }
}
new MinusPlus;